<template >
  <div class="body" >
    <div>
      <el-carousel :interval="4000" type="card" height="250px" >
        <el-carousel-item v-for="item in list" :key="item.key">
         <img class="picture" :src="item.src" >
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>

    </div>
    <div class="container">
       <div class="suggestion">
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;margin-top:200px;font-size:16px;height:20px">
  点击查看当前搜索热词
</el-button>
<div class="wk">
                <img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png
                ">
            </div>

<el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false">
  <p class="title">为您推荐近日十大搜索热选</p>
  <br>
  <br>
 
  <span class="tag" @click="answer0">新冠</span>
  <br>
  <br>
  <span class="tag" @click="answer1">肺炎</span>
  <br>
  <br>
  <span class="tag" @click="answer2">新冠感染症状</span>
  <br>
  <br>
  <span class="tag" @click="answer3">新冠能治好吗</span>
   <br>
  <br>
  <span class="tag" @click="answer4">西红柿和虾能一起吃吗</span>
   <br>
  <br>
  <span class="tag" @click="answer5">冬天长冻疮</span>
   <br>
  <br>
  <span class="tag" @click="answer6">如何除螨</span>
   <br>
  <br>
  <span class="tag" @click="answer7">怎么治痘痘</span>
   <br>
  <br>
  <span class="tag" @click="answer8">心脏不舒服</span>
   <br>
  <br>
  <span class="tag" @click="answer9">胃不舒服</span>

</el-drawer>
    </div>
      <div class="header">
        <h2 style="color: white; text-align: center; line-height: 40px">
          欢迎使用在线咨询（免费）
        </h2>
      </div>
      <div class="content">
        <ul>
          <p v-show="text_play" style="text-align:center">
            请稍等，正在为您连线...
          </p>
          <li
            :class="[record[index].sort == 1 ? 'classaa' : 'classbb']"
            v-for="(item, index) in record"
            :key="item.content"
          >
            <div v-if="record[index].sort == 0">
              
              <span>
                <img
                  class="touxiang1"
                  v-show="play"
                  src="../../assets/404_images/self.png"
                />
              </span>

              <span class="span1"> {{ record[index].content }} </span>

            </div>

            <div v-if="record[index].sort == 1">
              <span >
                <img
                class="touxiang2"
                v-show="play"
                src="../../assets/404_images/nan.png"
              />
              </span>
              <span class="span2" >
                {{ record[index].content }}
              </span>
            </div>
          </li>
        </ul>
      </div>

      <div class="typing">
        
        <el-input  placeholder="请输入内容" :disabled=input v-model="my_content"></el-input>
        <el-button class="button"  @click="add" style="float: left">
          {{ bt_change }}
        </el-button>
        <el-button class="button" v-show="s_play" @click="send" style="float: right"> 发送 </el-button>
      </div>
      <div class="bg">
        <div class="bg1" >
      <video style="margin-left:19px;margin-top:0px;" data-v-015698c1="" autoplay  src="https://expertimg.cdn.bcebos.com/expertcms/med/pc/use_wz_pc2.mp4"   id="cp-home-video" class="cp-home-brand-phone"></video>

        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import Qs from 'qs'
import Vue from "vue";
import Tinymce from '../../components/Tinymce'
import axios from 'axios'
import robot from '../../assets/404_images/robot.json'
// Vue.forceUpdate();

import { mapActions, mapMutations, mapState } from "vuex";
export default {
  components:{
     Tinymce,
   },
  computed: {
    ...mapState("console", ["data"]),
  },
  data() {
    return {
      input:true,
      list:[{key: '', src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2546858924,693434813&fm=26&gp=0.jpg'},
      {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=346985521,2331736739&fm=26&gp=0.jpg'},
      {src:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1057292201,837031635&fm=26&gp=0.jpgs'},
      {src:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2278106568,3215310739&fm=26&gp=0.jpg"}],
      b:0,
      drawer: false,
      text_play:false,
      play: false,
      s_play:false,
      my_content: "",
      bt_change: "开始咨询",
      data_obtain: { data: "" },
      record: [{ sort: "", content: "" ,title:0}],
      record_content: { sort: "1", content: "-1" ,title:0},
      // test:[0,1,2,3],
      obj: { id: 11 },

      a: 0,
      console_list1: {
        title: "console1",
        content: "",
        categoryId: 5,
        timer:'',
        id: "159",
      },
      console_list: { title: "console", content: "", categoryId: 5, id: "81" },
    };
  },

 

  methods: {
    ...mapActions("console", ["text_obtain", "saveOrUpdate"]),
    ...mapMutations("console", ["set_data"]),
   
        answer9(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[9].data9
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
    answer8(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[8].data8
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
    answer7(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[7].data7
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
    answer6(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[6].data6
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
    answer5(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[5].data5
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
   answer4(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[4].data4
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
  answer3(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[3].data3
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
   answer2(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[2].data2
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
  answer1(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[1].data1
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },

     answer0(){
       let backup={sort:'',content:''}
       backup.sort=1;
       backup.content=robot[0].data0
       this.record[this.a]=backup;
      // this.record[this.a].content=this.robot[0].data0
      console.log( this.record[this.a].content);
      this.a++
     },
       publish(params) {
      axios({
        url: "http://39.102.37.84:8001/article/saveOrUpdate",
        method: "post",
        data: Qs.stringify(params),
        headers:{
            'Authorization':localStorage.getItem('token')
        }
      }).then(() => {
        
       
       
      });
    },
    send() {
     
      // console.log(this.record[0],this.a,this.record[this.a-1]);
      let con = { sort: "", content: "",title:0 };
      con.content = this.my_content;
      con.sort = 0;
       con.title=this.b; 
      this.record[this.a] = con;
      let params={id:32,content:'',title:'console',content:'',categoryId:5}
      params.content=con.content
      params.title=con.title
      this.publish(params)
      //  this.saveOrUpdate(params)
       this.b++;
      this.a++;
      this.my_content = "";
      this.$forceUpdate();
    },
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    },

    add() {
      // this.record[2] = 15;
      // console.log(this.record);
      this.input=false;
      if (this.bt_change == "开始咨询") {
        this.text_play=true;
        this.bt_change = "结束咨询";
        let params={id:32,title:-1,categoryId:5,content:'病人在咨询当中！'}
         this.publish(params)
        this.interval();
        this.s_play=true;

      
        this.$forceUpdate();
        this.play = true;
        
      } else {
      this.input=true;
        this.text_play=false;

            clearInterval(this.timer);
        this.bt_change = "开始咨询";
         window.sessionStorage.clear()
                let params={id:32,title:this.b-1,categoryId:5,content:'病人在咨询当中！'}
         this.publish(params)
       
        this.s_play=false
       
         this.$forceUpdate();
         
        
        // this.delete_console()
      }
    },
    interval() {
      console.log(this.record[0]);
      this.timer=setInterval(() => {
        let res = "";
        this.text_obtain(this.obj).then(() => {
          this.res = this.data.data.content;
          console.log(this.res);
          // console.log(this.record[0]);

          if (this.record_content.title != this.data.data.title) {
            sessionStorage.setItem('message1'+this.a,this.data.data.title)
            sessionStorage.setItem('message'+this.a,this.res)
            this.record_content.title=sessionStorage.getItem('message1'+this.a);
            let con1={sort:'',content:'',title:0};
            con1.sort=1;
            con1.content=sessionStorage.getItem('message'+this.a)
            con1.title=sessionStorage.getItem('message1'+this.a)
            this.record[this.a]=con1
            // this.record[this.a].sort=1;
            // this.record[this.a].content=localStorage.getItem('message')
            this.record_content.content = this.res;
            this.record_content.title=this.data.data.title
            this.a++;
            // this.record_content.sort = 1;
            // this.record[this.a] = this.record_content;
            // console.log(this.record[this.a].content);
             this.text_play=false
          }
          this.$forceUpdate();
        });
      }, 5000);
    },

    
  },
};
</script>


 
<style scoped>
@keyframes wk_move{
  from{margin-left: 0}
    to{margin-left: -1600px;}
    
}
.wk img{
                 height: 180px;
        animation: wk_move 1s steps(8) infinite;

     }
 .wk {
        width: 200px;
        height: 180px;
        /* border: 1px solid black; */
        overflow: hidden;
    }
.button{
  height: 30px;
  color: rgb(112, 175, 194);
}
.title{
  font-size: 20px;
  text-align: center;
}
.picture{
  width: 100%;
}
.tag{
    cursor: pointer;
  background-color: rgb(122, 193, 247);
  height: 30px;
  padding: 7px;
  border: 1px solid #73aae9;
  border-radius: 10px;
  margin: 5px 5px 5px 5px;
  
}
.suggestion{
  position: absolute;
  height: 572px;
  width: 200px;
  /* background-color: #758057; */
  background-image: url(../../assets/404_images/bg.jpg);
  border-radius: 0px 120px 120px 0px;
  /* margin-top: -300px; */
  margin-left: 1060px;
}
.el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
.body{
  background-repeat: no-repeat;
  background-image: url(../../assets/404_images/doctor.jpg);
  background-size: cover;
}
.bg1{
  overflow: hidden;
  height: 700px;
  border-radius: 60px;
  /* background-color:red; */
  width: 350px;
  position: absolute;
  top:10px;
  margin-left: 0;


}
.bg{margin-top: -600px;
  position: relative;
  height: 727px;
  width: 362px;
  /* overflow: hidden; */
  background-image: url('../../assets/404_images/phone.png');
}
span{

  width: 300px;
  line-height: 30px;
}
.classaa {
  padding: 10px;
  float: left;
}
.span1 {
  margin-top: 10px;
  float: right;
  background-color: rgb(36, 176, 211);
  border-radius: 5px;
}
.span2 {
  margin-top: 10px;
  float: right;
}
.classbb {
  float: right;
}
* {
  margin: 0;
  padding: 0;
}
.touxiang1 {
  width: 50px;
  height: 50px;
  float: right;
}

.touxiang2 {
  width: 50px;
  height: 50px;
  float: left;
}
li {
  list-style: none;
}
.typing {
  margin-left: 420px;
  width: 640px;
}
.content {
  height: 500px;
  margin-left: 420px;

  overflow: scroll;
  background-color: #eeeeee;
  width: 640px;
  
}
.header {
  margin-left: 420px;

  width: 640px;
  height: 40px;
  background-color: #00bcd4;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>